<template>
  <div class="nav-all">
    <div class="nav-box" @mouseover="heTop">
      <div class="nav-item1">
        <div><img src="../../assets/img/logo2.png" alt="" /></div>
        <div class="nav-wangname"><a href="/homepage">食记</a></div>
      </div>

      <div class="nav-item2">
        <el-input
          v-model="input"
          @change="selectFood"
          placeholder="请输入内容"
        ></el-input>
        <i class="el-icon-search"></i>
      </div>

      <div class="nav-item3">
        <div v-if="panduan != 'null' && panduan != null" class="item1 logins">
          <a href="/mypage"><img :src="userInfor.data.userImg" alt="" /></a>
          <div class="userName">
            <a href="/mypage">{{ userInfor.data.userName }}</a>
          </div>
        </div>

        <div v-else class="item2">
          <div><a href="/loginpage">登录</a></div>
        </div>

        <div class="item2">
          <div @click="about" class="gywm">关于我们</div>
        </div>

        <div class="item2">
          <div class="gywm" @click="feed">推荐留言</div>
        </div>
      </div>
    </div>

    <div
      class="nav-hidden"
      @mouseover="heTop"
      @mouseout="noTop"
      :style="{ top: top + 'rem' }"
    >
      <div :class="{ ssss1: top == 0.45 }" class="textcolor">
        <a href="/homepage"
          ><img src="../../assets/img/main_icon01.svg" alt=""
        /></a>
        <div><a href="/homepage">网站首页</a></div>
      </div>

      <div :class="{ ssss2: top == 0.45 }" class="textcolor">
        <router-link to="/sortpage"
          ><img src="../../assets/img/main_icon02.svg" alt=""
        /></router-link>
        <div><router-link to="/sortpage">美食宝库</router-link></div>
      </div>

      <div :class="{ ssss3: top == 0.45 }" class="textcolor">
        <a href="/rankingpage"
          ><img src="../../assets/img/main_icon03.svg" alt=""
        /></a>
        <div><a href="/rankingpage">美食排行</a></div>
      </div>

      <div :class="{ ssss4: top == 0.45 }" class="textcolor">
        <a href="/collocaitem"
          ><img src="../../assets/img/main_icon04.svg" alt=""
        /></a>
        <div><a href="/collocaitem">美食搭配</a></div>
      </div>

      <div :class="{ ssss5: top == 0.45 }" class="textcolor">
        <a href="/mypage"
          ><img src="../../assets/img/main_icon05.svg" alt=""
        /></a>
        <div><a href="/mypage">我的宝地</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "Navig",
  data() {
    return {
      input: "",
      login: false,
      top: -0.45,
      showAbout: false,
      showFeed: false,
      userInfor: "",
      panduan: sessionStorage.getItem("userid"),
      userid: 0,
    };
  },

  mounted: function () {
    this.initUserId();
  },

  methods: {
    heTop() {
      this.top = 0.45;
    },
    noTop() {
      this.top = -0.45;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    about() {
      this.showAbout = true;
      this.$emit("childByValue", this.showAbout);
    },
    feed() {
      this.showFeed = true;
      this.$emit("childByFeed", this.showFeed);
    },

    initUserId() {
      if (sessionStorage.getItem("userid") != "null") {
        this.userid = sessionStorage.getItem("userid");
      }
      request({
        url: "/user/queryUserInfo",
        method: "post",
        params: {
          userId: this.userid,
        },
      })
        .then((res) => {
          if (sessionStorage.getItem("userid") != null) {
            this.login = true;
            console.log(this.login);
          }
          this.userInfor = res.data;
          console.log(res.data, this.userInfor.data.userName);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectFood() {
      this.$router.push({
        path: "/searchresult",
        query: {
          footName: this.input,
        },
      });
      location.reload();
    },
  },
};
</script>

<style>
.nav-all a {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.nav-box {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0.45rem;
  background-color: rgb(230, 127, 76);
  align-items: center;
  z-index: 99999;
}

.nav-item1 {
  flex: 1.1;
  display: flex;
  align-items: center;
  font-size: 0.035rem;
  justify-content: center;
}

.nav-item2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.nav-item2 input {
  height: 0.2rem;
}
.nav-item2 i {
  font-size: 0.12rem;
  margin-left: -0.3rem;
  z-index: 9999;
}

.logins {
  margin-right: 0.17rem;
}
.nav-item2 i:hover {
  cursor: pointer;
}

.nav-wangname a {
  color: #fff;
  font-size: 0.14rem;
  font-family: "思雅黑体";
  font-weight: 500;
}

.nav-item3 {
  flex: 1.5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.095rem;
}

.item1 {
  width: 1rem;
  display: flex;
  align-items: center;
  margin-left: 0.12rem;
}

.item2 {
  width: 1rem;
  margin-left: 0.12rem;
}

.nav-item1 img {
  width: 0.55rem;
  height: 0.4rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}

.nav-item3 img {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.05rem;
}

.nav-hidden {
  display: flex;
  position: fixed;
  background-color: rgb(230, 127, 76);
  width: 100%;
  height: 0.65rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.1rem;
  z-index: 9999;
  transition: all 1s;
}

.gywm {
  cursor: pointer;
}

.nav-hidden img {
  width: 0.3rem;
  height: 0.3rem;
}

@keyframes dong {
  0% {
    top: -40px;
  }
  10% {
    top: -20px;
  }
  20% {
    top: -5px;
  }
  30% {
    top: -1px;
  }
  40% {
    top: 0px;
  }
  50% {
    top: 5px;
  }
  60% {
    top: -6px;
  }
  70% {
    top: 0px;
  }
  80% {
    top: -4px;
  }
  90% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.ssss1 {
  position: relative;
  animation: dong 1s linear 1;
}

.ssss2 {
  position: relative;
  animation: dong 1.2s linear 1;
}

.ssss3 {
  position: relative;
  animation: dong 1.4s linear 1;
}
.ssss4 {
  position: relative;
  animation: dong 1.6s linear 1;
}
.ssss5 {
  position: relative;
  animation: dong 1.8s linear 1;
}

.textcolor a {
  display: inline-block;
  width: 0.9rem;
  font-size: 0.1rem;
  color: rgb(255, 255, 255);
}

.textcolor:hover a {
  color: rgb(196, 188, 188);
}
</style>
